<template>
	<van-button :icon="value ? 'star' : 'star-o'" :class="{ collected: value }" @click="onCollect" :loading="loading">
	</van-button>
</template>

<script setup>
	import {
		addCollect,
		deleteCollect
	} from '@/api/article.js'

	const user_data = localStorage.getItem("s_user")
	const user_id = JSON.parse(user_data)["id"]
	
	const props = defineProps({
		data:{
			value: {
				type: Boolean,
				required: true,
			},
			articleId: {
				type: [Number, String, Object],
				required: true,
			}
		}
	})
	
	const loading = ref(true)

	function onCollect() {
		try {
			if (value) {
				deleteCollect(this.articleId)
			} else {
				addCollect()
			}
			this.$emit('input', !this.value)
			this.$toast.success(!this.value ? '收藏成功' : '取消收藏')
		} catch (err) {
			this.$toast.fail('操作失败')
		}
		this.loading = false
	}
</script>

<style scoped>
	.collected .van-icon {
		color: #FFB5C5
	}
</style>
